<template>
  <div class="aside">
    <el-menu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <!-- <span slot="title" @click="renew">数据机</span> -->
        <span slot="title">欢迎来到数据机</span>
      </el-menu-item>

      <el-submenu index="1">
        <template slot="title"
          ><i class="el-icon-message"></i>个人资料</template
        >
        <el-menu-item index="1-1" @click="myInfo = true" type="primary"
          >我的资料</el-menu-item
        >
        <!-- 我的资料的抽屉 -->
        <el-drawer title="我是标题" :visible.sync="myInfo" :with-header="false">
          <!-- <myInfo></myInfo> -->
          <!-- <myInfo :userdataMyInfo="userdataTo"></myInfo> -->
          <myInfo :userdataMyInfo="userdataTo"></myInfo>
        </el-drawer>

        <el-menu-item index="1-2" @click="myCollect = true"
          >我的收藏</el-menu-item
        >
        <el-drawer
          title="我收藏的感想文章"
          :visible.sync="myCollect"
          direction="ltr"
        >
          <myCollect :myCollect="myCollect"></myCollect>
        </el-drawer>
      </el-submenu>
      <!-- 浏览历史 -->
      <router-link
        to="/home/rank"
        title="传下去的数据"
        style="text-decoration: none"
      >
        <el-menu-item>
          <i class="el-icon-document" />
          <span slot="title">机型排行</span>
        </el-menu-item>
      </router-link>
      <!-- 浏览历史 -->
      <router-link
        to="/home/administrator"
        style="text-decoration: none"
        v-show="userdata.userData.state === 1"
      >
        <el-menu-item>
          <i class="el-icon-coordinate" />
          <span slot="title">管理员页面</span>
        </el-menu-item>
      </router-link>
      <el-menu-item @click="exit"> 退出 </el-menu-item>
    </el-menu>
    欢迎您： {{ userdata.userData.username }}
    <br />
  </div>
</template>

<script>
import myInfo from "./myInfo.vue";
import myCollect from "./myCollect.vue";

import * as types from "@/store/types.js";
export default {
  name: "HomeAside",

  // 用户信息从主页传过来的
  props: ["userdata"],
  components: {
    myInfo,
    myCollect,
  },
  data() {
    return {
      // 我的资料的抽屉默认是false
      myInfo: false,
      // 我的收藏，抽屉
      myCollect: false,

      // 传到个人资料的数据，要是个token，用于显示和修改个人信息
      userdataTo: {},
      // 本侧边栏homeAside的个人信息
      asideInfo: {},
      allInfo: {},
    };
  },
  watch: {
    deep: true,
    immediate: true,
    userdata(news) {
      // console.log("监听里面的信息", news);
      this.allInfo = this.news;
      this.userdataTo = news.tokenTo;
      this.asideInfo = news.userData;
    },
  },
  mounted() {
    this.propsData();
  },

  methods: {
    // 获取props里面的值
    propsData() {
      this.allInfo = this.userdata;
    },
    // 退出
    exit: function () {
      this.$confirm("你确定要退出吗", "提示", {
        confirmButtonText: "是的，再见",
        cancelButtonText: "再看一会",
        type: "info",
      })
        .then(() => {
          this.$store.commit(types.LOGOUT);
          // 跳回登录页面
          this.$router.push("/login");
        })
        .catch(() => {
          // 留在首页
        });
    },
  },
};
</script>

<style lang="less" scoped>
.aside {
  background-color: rgb(255, 255, 255);
  height: 100%;
}
</style>
